<template>
	<view class="container">
		<view class="tui-page-title" @tap="doc"><image src="/static/images/index/logo.png" class="tui-logo"></image></view>
		<view class="tui-page-desc">
			<text>ThorUI示例，让开发效率倍速提升。更多功能请前往小程序</text>
			<text class="tui-link" @tap="openThorUI">ThorUI组件库。</text>
		</view>
		<view class="tui-main-box">
			<view class="tui-collapse-item" v-for="(item, index) in menuList" :key="index">
				<tui-collapse @click="change" :arrow="false" :index="index" :current="current" :height="item.height + 'rpx'">
					<template v-slot:title>
						<view class="tui-menu-item" :class="[current == index ? 'tui-opcity' : '']">
							<view class="tui-menu-title">{{ item.name }}</view>
							<image :src="'/static/images/index/' + item.id + '.png'" class="tui-menu-ic"></image>
						</view>
					</template>
					<template v-slot:content>
						<navigator hover-class="none" v-for="(page, subIndex) in item.pages" :key="subIndex" :url="page.page">
							<tui-list-cell padding="0" arrow :unlined="subIndex === item.pages.length - 1">
								<view class="tui-menu-list">{{ page.name }}</view>
							</tui-list-cell>
						</navigator>
					</template>
				</tui-collapse>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			menuList: [],
			listOnline: [
				{
					id: 'view',
					name: '视图容器',
					height: 400,
					pages: [
						{
							name: 'Flex布局',
							page: '/pages/index/flex/flex'
						},
						{
							name: 'scroll-view',
							page: '/pages/index/scroll-view/scroll-view'
						},
						{
							name: 'swiper指示点',
							page: '/pages/index/swiper/swiper'
						},
						{
							name: 'cover-view',
							page: '/pages/index/location/location'
						}
					]
				},
				{
					id: 'content',
					name: '基础内容',
					height: 200,
					pages: [
						{
							name: 'text',
							page: '/pages/index/text/text'
						},
						{
							name: 'progress',
							page: '/pages/index/progress/progress'
						}
					]
				},
				{
					id: 'form',
					name: '表单',
					height: 400,
					pages: [
						{
							name: 'button',
							page: '/pages/index/button/button'
						},
						{
							name: 'checkbox',
							page: '/pages/index/checkbox/checkbox'
						},
						{
							name: 'input',
							page: '/pages/index/input/input'
						},
						{
							name: 'radio',
							page: '/pages/index/radio/radio'
						}
					]
				},
				{
					id: 'map',
					name: '地图',
					height: 200,
					pages: [
						{
							name: '地图选点',
							page: '/pages/index/location/location'
						},
						{
							name: '周边兴趣点',
							page: '/pages/index/maps/maps'
						}
					]
				},
				{
					id: 'canvas',
					name: '画布',
					height: 100,
					pages: [
						{
							name: '生成分享海报',
							page: '/pages/index/poster/poster'
						}
					]
				},
				{
					id: 'index',
					name: '索引列表',
					height: 100,
					pages: [
						{
							name: '索引列表（组件）',
							page: '/pages/index/indexList/indexList'
						}
					]
				},
				{
					id: 'template',
					name: '模板',
					height: 500,
					pages: [
						{
							name: '签到模板',
							page: '/pages/template/signIn/index/index'
						},
						{
							name: '咖啡点单',
							page: '/pages/template/cafe/menu/menu'
						},
						{
							name: '点餐模板',
							page: '/pages/my/tips/tips'
						},
						{
							name: '短视频模板',
							page: '/pages/my/tips/tips'
						},
						{
							name: '付费成品',
							page: '/pages/my/product/product'
						}
					]
				}
			],
			current: -1,
			sweixin: null
		};
	},
	computed: mapState(['isOnline']),
	onLoad() {
		this.menuHandle();
		// #ifdef APP-PLUS
		plus.share.getServices(s => {
			for (let item of s) {
				if (item.id == 'weixin') {
					this.sweixin = item;
				}
			}
		});
		// #endif
		
	   // #ifdef MP-WEIXIN
	   // 在页面中定义插屏广告
	   let interstitialAd = null
	   
	   // 在页面onLoad回调事件中创建插屏广告实例
	   if (wx.createInterstitialAd) {
	     interstitialAd = wx.createInterstitialAd({
	       adUnitId: 'adunit-833a3e88c6377df8'
	     })
	     interstitialAd.onLoad(() => {})
	     interstitialAd.onError((err) => {})
	     interstitialAd.onClose(() => {})
	   }
	   
	   // 在适合的场景显示插屏广告
	   if (interstitialAd) {
	     interstitialAd.show().catch((err) => {
	       console.error(err)
	     })
	   }
	   // #endif
	},
	watch: {
		isOnline(val) {
			if (val) {
				this.menuHandle();
			}
		}
	},
	methods: {
		...mapActions(['getOnlineStatus']),
		async menuHandle() {
			let list = [...this.listOnline];
			let menuList = list.splice(0, 6);
			let isOnline = await this.getOnlineStatus();
			if (isOnline) {
				menuList = this.listOnline;
			}
			this.menuList = menuList;
		},
		change(e) {
			this.current = this.current == e.index ? -1 : e.index;
		},
		openThorUI() {
			// #ifdef MP-WEIXIN
			wx.navigateToMiniProgram({
				appId: 'wxb6a98ca343f57a38'
			});
			// #endif

			// #ifndef  MP-WEIXIN
			if (this.sweixin) {
				this.sweixin.launchMiniProgram({
					id: 'gh_0c07a8c02dac'
				});
			} else {
				uni.previewImage({
					urls: ['https://thorui.cn/img/applets.jpg']
				});
			}
			// #endif
		},
		doc() {
			this.tui.href('/pages/my/doc/doc');
		}
	},
	onShareAppMessage: function(e) {
		return {
			title: 'ThorUI示例'
		};
	}
};
</script>

<style lang="scss">
.container {
	width: 100%;
	padding-bottom: 30rpx;

	.tui-page-title {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 70rpx 0 30rpx 0;

		.tui-logo {
			height: 88rpx;
			width: 88rpx;
			border-radius: 4rpx;
		}
	}

	.tui-page-desc {
		width: 100%;
		font-size: $uni-font-size-base;
		color: $uni-text-color-gray;
		text-align: center;
		padding: 0 80rpx;
		box-sizing: border-box;

		.tui-link {
			color: $uni-color-link;
		}
	}

	.tui-main-box {
		width: 100%;
		padding: 50rpx $uni-spacing-row-lg 0;
		box-sizing: border-box;

		.tui-collapse-item {
			margin-bottom: 24rpx;
			border-radius: 6rpx;
			overflow: hidden;
			box-shadow: 0 15rpx 10rpx -15rpx #efefef;
		}

		.tui-menu-item {
			width: 100%;
			padding: $uni-spacing-row-lg;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: all 0.15s;

			.tui-menu-ic {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.tui-opcity {
			opacity: 0.4;
		}

		.tui-menu-list {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			font-size: $uni-font-size-lg;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}
	}
}
</style>
